<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Balances</title>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/materialize-css@1.0.0/dist/css/materialize.min.css"
    integrity="sha256-OweaP/Ic6rsV+lysfyS4h+LM6sRwuO3euTYfr6M124g=" crossorigin="anonymous">
  <style>
    body {
      min-height: 100vh;
    }
    .container .row {
      margin-bottom: 0;
    }
    #result .card {
      min-height: calc(100vh - 580px);
    }
    #input-text {
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      min-height: 300px;
    }
    #preloader {
      text-align: center;
      display: none;
    }
  </style>
</head>

<body>

  <div class="container">

    <div class="row">
      <div class="col s12">
        <div class="card">
          <div class="card-content">
            <span class="card-title">Input</span>
            <div id="text-input">
              <div class="input-field">
                <div id="input-text"><%=beanTemplate%></div>
              </div>
            </div>
          </div>
          <div class="card-action">
            <a class="waves-effect waves-light btn" id="get-balance" href="#">Get balance</a>
          </div>
        </div>
      </div>
      <div class="row" id="result">
        <div class="col s12">
          <div class="card">
            <div class="card-content">
              <span class="card-title">Result</span>
              <div id="preloader">
                <div class="preloader-wrapper small active">
                  <div class="spinner-layer">
                    <div class="circle-clipper left">
                      <div class="circle"></div>
                    </div>
                    <div class="gap-patch">
                      <div class="circle"></div>
                    </div>
                    <div class="circle-clipper right">
                      <div class="circle"></div>
                    </div>
                  </div>
                </div>
              </div>

              <div>
                <pre id="content"></pre>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.0/dist/jquery.min.js"
    integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/materialize-css@1.0.0/dist/js/materialize.min.js"
    integrity="sha256-U/cHDMTIHCeMcvehBv1xQ052bPSbJtbuiw4QA9cTKz0=" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/ace-builds@1.4.10/src-min/ace.js"
    integrity="sha256-Kr5Mbwq/xwJYw6XU4NR519/iosGvECYMyMU8IZ/rQok=" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/gh/beancount/fava@241a7b928de4dc9e9131599f171f6041bef53060/beancount_web/static/vendor/ace-js/mode-beancount.js"></script>
  <script>
    const editor = ace.edit("input-text")
    const waiting = () => {
      if ($('#get-balance').hasClass('disabled')) {
        $('#get-balance').removeClass('disabled')
        $('#preloader').hide()
      } else {
        $('#get-balance').addClass('disabled')
        $('#preloader').show()
        $('#content').html('')
      }
    }
    $(() => {
      editor.session.setMode("ace/mode/beancount")
      $('#get-balance').click(e => {
        e.preventDefault()
        waiting()
        $.post('/bean', {
          input: editor.getValue()
        }).then(p => {
          $('#content').text(p)
          waiting()
        }).fail(p => {
          let message = ((p && p.message) ? p.message : p).toString()
          message = message.replace(/</g, '&lt;').replace(/>/g, '&gt;')
          $('#content').html(`<p>Server Error: ${message}</p>`)
        })
      })
    })
  </script>

</body>

</html>
